<template>
  <div class="dataSourceManagement">
    <div id="main1" class="main_container box"></div>
    <div id="main2" class="main_container box"></div>
  </div>
</template>

<script>
/*  */
export default {
  name: 'Home',
  components: {
  },
  data() {
      return {
        userCount:{
          x:[2021-1,2021-2,2021-3,2021-4,2021-5],
          y:[66,45,25,89,99]
        },
        payCount:{
          x:[2021-1,2021-2,2021-3,2021-4,2021-5],
          y:[789,689,898,799,989]
        }
      }
    },
    mounted() {
      this.initCharts()
    },
    created(){
      this.getUserCount(),
      this.getPayCount()
    },
    methods: {
      // 页面图表数据
      initCharts() {
      // 初始化echarts实例
      var myChart1 = this.$echarts.init(document.getElementById("main1"))
      var myChart2= this.$echarts.init(document.getElementById("main2"))
      // 绘制图表
      myChart1.setOption({
        title: {
          text: "月度用户量",
        },
          grid:{
            top:"20%",
            left:"10%",
            right:"20%",
            bottom:"10%"
        },
        tooltip: {},
        xAxis: {
          data: this.userCount.x,
        },
        yAxis: {},
        series: [
          {
            name: "用户量量",
            type: "bar",
            data: this.userCount.y,
          },
        ],
      })
      myChart2.setOption({
        title: {
          text: "月度用户消费",
        },
        grid:{
          top:"20%",
          left:"10%",
          right:"20%",
          bottom:"10%"
        },
        tooltip: {},
        xAxis: {
          data: this.payCount.x,
        },
        yAxis: {},
        series: [
          {
            name: "用户消费额",
            type: "line",
            data: this.payCount.y,
          },
        ],
      })
      },
      // 获取月度用户量
      getUserCount(){
        this.$apis.
          userCount()
          .then(res =>{
            const month = []
            const users = []
            for(let x in res.data){
              for(let y in res.data[x]){
                if(y==='month'){
                  month.push(res.data[x][y])
                }else{
                  users.push(res.data[x][y])
                }
              }
            }
            this.userCount.x = month
            this.userCount.y = users
            this.initCharts()
          })
      },
      // 获取月度用户消费额
      getPayCount(){
        this.$apis.
          payCount()
          .then(res =>{
            const month = []
            const users = []
            for(let x in res.data){
              for(let y in res.data[x]){
                if(y==='month'){
                  month.push(res.data[x][y])
                }else{
                  users.push(res.data[x][y])
                }
              }
            }
            this.payCount.x = month
            this.payCount.y = users
            this.initCharts()
          })
      }
    },
}
</script>

<style scoped>

.dataSourceManagement {
    background: #f0f2f5;
    position: relative;
}
.box {
  width: 95%;
  height: 300px;
    position: relative;
    padding: 16px 16px;
    margin: 20px 16px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(97, 160, 230, 0.1);
    border-radius: 8px;
}
/* .main_container {
  width: 100%;
  height: 200px;
  overflow: hidden;
} */
</style>
